/* eslint-disable react/prop-types */
import React from 'react';
import { Table } from 'antd';
import ToolsForm from './toolsForm'
import HandleBtns from './handleBtns'
import '@/pages/mysite/default_table.scss';

class BaseTable extends React.Component {
    static defaultProps = {
        columns: [],
        data: []
    }

    constructor(props) {
        super(props)
        this.state = {
            selectRows: [],
            pageSize: 10,
            pageNumber: 1
        }
    }

    //页码改变
    onPageNumberChange = (num) => {
        this.setState({ pageNumber: num });
        const { pageSize } = this.state
        this.props.handleRow('pageChange', { pageNumber: num, pageSize })
    }
    //每页条数改变
    onPageSizeChange = (num, size) => {
        this.setState({ pageNumber: num, pageSize: size })
        this.props.handleRow('pageChange', { pageNumber: num, pageSize: size })
    }

    render() {
        const { columns, data, tools, btns, batch, select, handleRow, total } = this.props;
        const { pageNumber, pageSize } = this.state;
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                handleRow('selectRow', selectedRows)
            }
        };
        return (
            <div className="table_box">
                <ToolsForm tools={tools} handleRow={handleRow}></ToolsForm>
                <Table
                    columns={columns}
                    dataSource={data}
                    bordered
                    size={"middle"}
                    scroll={{ x: 1000 }}
                    rowSelection={select ? rowSelection : null}
                    rowKey="id"
                    pagination={{
                        total: total,
                        pageSize: pageSize,
                        current: pageNumber,
                        showQuickJumper: true,
                        pageSizeOptions: ['10', '20', '50'],
                        showSizeChanger: true,
                        showTotal: () => `共 ${total} 条`,
                        onChange: this.onPageNumberChange,
                        onShowSizeChange: this.onPageSizeChange
                    }}
                    title={() => {
                        return <HandleBtns btns={btns} batch={batch}></HandleBtns>
                    }}
                />
            </div>
        )
    }
}

export default BaseTable
